<template>
  <div class="demo-title">swiper/demo4</div>
  <div class="demo">
    <Swiper ref="swiper">
      <SwiperItem v-for="(item, i) in images" :key="`swiper-item${i}`">
        <img :src="item" />
      </SwiperItem>
    </Swiper>
    <img class="swiper-prev" :src="arrowLeftPng" @click="jumpPrev()" />
    <img class="swiper-next" :src="arrowRightPng" @click="jumpNext()" />
    <button class="swiper-jump" @click="jumpTo(3)">切到第3页</button>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue'
  import { Swiper, SwiperItem } from '@sscd-mobile/swiper'
  const images = reactive([
    'https://ssc-design-1311112663.cos.ap-guangzhou.myqcloud.com/components/h5/swiper/swiper-1.png',
    'https://ssc-design-1311112663.cos.ap-guangzhou.myqcloud.com/components/h5/swiper/swiper-2.png',
    'https://ssc-design-1311112663.cos.ap-guangzhou.myqcloud.com/components/h5/swiper/swiper-3.png',
    'https://ssc-design-1311112663.cos.ap-guangzhou.myqcloud.com/components/h5/swiper/swiper-4.png',
    'https://ssc-design-1311112663.cos.ap-guangzhou.myqcloud.com/components/h5/swiper/swiper-5.png'
  ])
  const arrowLeftPng = 'https://ssc-design-1311112663.cos.ap-guangzhou.myqcloud.com/components/h5/swiper/arrow-left.png'
  const arrowRightPng = 'https://ssc-design-1311112663.cos.ap-guangzhou.myqcloud.com/components/h5/swiper/arrow-right.png'
  const swiper = ref()
  const jumpPrev = () => swiper.value.prev()
  const jumpNext = () => swiper.value.next()
  const jumpTo = (page: number) => swiper.value.to(page)
</script>

<style lang="less" scoped>
  .demo {
    position: relative;
    margin: 0 12px;
    > .swiper-prev {
      position: absolute;
      top: 45px;
      left: 0;
      width: 20px;
      height: 60px;
    }
    > .swiper-next {
      position: absolute;
      top: 45px;
      right: 0;
      width: 20px;
      height: 60px;
    }
    > .swiper-jump {
      width: 78px;
      height: 30px;
      margin-top: 12px;
      font-size: 12px;
    }
  }
</style>
